import { ref } from 'vue'
import { findTopCategory } from '@/api/category'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'

function useCategory () {
  // 方案一:geirouter-view 干掉缓存 组件中所有的请求都会重新发送一遍 粗暴
  // 方案二: onBeforeRouteUpdate 在路由更新时执行一个回调 回调中发送我们想要发送的接口请求
  const category = ref([]) // 存储数据
  const route = useRoute() // 引入useRoute
  async function categoryList (id) {
    const res = await findTopCategory(id = route.params.id)
    category.value = res.data.result
    //   console.log(category.value)
    // console.log(res)
  }
  categoryList()
  onBeforeRouteUpdate((to) => {
    // to:新路由对象
    // console.log(to.params.id)
    // 重新发送我们获取新数据的请求
    categoryList(to.params.id)
  })
  return { category }
}
useCategory()

export default useCategory
